<template>
  <div class="company-list-1">
    <div class="header">
      <div class="header-item" v-for="item in headData" :key="item.title">
        <svgIcon :name="item.icon" width="50px" height="50px"></svgIcon>
        <div class="header-item-info">
          <div class="label">{{ item.title }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-header">巡查调度人员与任务分布</div>
      <div style="width: 100%; height: 450px">
        <!-- <MyEchart :option="option"></MyEchart> -->
        <PositionsMap></PositionsMap>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import PositionsMap from '../echarts/PositionsMap.vue'

const props = defineProps({
  info: {
    type: Object,
    default: () => ({
      alarmsNum: 0,
      assignedNum: 0,
      idleNum: 0,
      ondutyPersonnelNum: 0,
      onpatrolNum: 0,
      unassignedNum: 0
    })
  },
})

// 响应式 headData
const headData = ref([])
watchEffect(() => {
  headData.value = [
    {
      icon: 'u1429',
      title: '有效告警数',
      value: props.info.alarmsNum || '0'
    },
    {
      icon: 'u1433',
      title: '已派单',
      value: props.info.assignedNum || '0'
    },
    {
      icon: 'u1437',
      title: '待核实',
      value: props.info.unassignedNum || '0'
    },
    {
      icon: 'u1441',
      title: '在岗服务员',
      value: props.info.ondutyPersonnelNum || '0'
    },
    {
      icon: 'u1441',
      title: '巡查中',
      value: props.info.onpatrolNum || '0'
    },
    {
      icon: 'u1441',
      title: '空闲中',
      value: props.info.idleNum || '0'
    }
  ]
})
</script>

<style scoped lang="scss">
@import '@/assets/table.css';

.company-list-1 {
  padding: 0 0 10px;
  width: 100%;
  height: 700px;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 16px;

  .header {
    width: 100%;
    height: 180px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 20px;

    &-item {
      width: 33.33%;
      display: flex;
      justify-content: center;
      align-items: center;

      &-info {
        margin-left: 20px;

        .label {
          line-height: 20px;
        }

        .value {
          font-size: 30px;
          line-height: 50px;
        }
      }
    }
  }

  .content {
    height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 10px;
    background-color: rgba(0, 0, 0, 0.2);

    &-header {
      width: 100%;
      height: 50px;
      background: url('@/assets/task/u1289.png') no-repeat center top;
      display: flex;
      justify-content: center;
      line-height: 50px;
    }
  }
}
</style>
